<template>
	<view class="bkg">
		<view class="" v-for="(item,index) in dataList">
			<view class="listItem" @click="clickItem(item)">
				<image class="listItem__image" :src="item.cover_url" ></image>
				<view class="listItem__textview">
					<text class="listItem__textview_title">{{item.title}}</text>
					<view style="flex: 1;"></view>
					<view class="listItem__textview_content">
						<view  v-for="(item2, index2) in item.label">
							<text class="listItem__textview_label">{{item2}}</text>
						</view>
						<view><text class="listItem__textview_label">{{item.create_time}}</text></view>
					</view>
					
				</view>
				<view style="width: 20px; height: 100%;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLatestQuickReport
	} from "@/api/home.js";
	
	export default {
		data() {
			return {
				dataList: ["1", "2", "3"]
			}
		},
		
		onLoad() {
			getLatestQuickReport()
			.then(res => {
				let code = res.code
				if (code == 0) {
					this.dataList = res.data
				}
			})
		},
		methods: {
			clickItem(item) {
				uni.navigateTo({
					url: '/pages/user/settings/webpage?content=' + item.content,
				})
			}
		}
	}
</script>

<style>
	.bkg {
		width: 100%;
		height: 100vh;
		/* 父元素设置相对定位 */
		position: relative;
		background-color: #F5F5F5;
	}
	
	.listItem {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 110px;
		background-color: #FFFFFF;
		margin-top: 5px;
	}
	
	.listItem__image {
		margin: 15px;
		width: 100px;
		height: 80px;
	}
	
	.listItem__textview {
		flex: 1;
		margin: 20px 0px 20px 0px;
		display: flex;
		flex-direction: column;
	}
	
	.listItem__textview_title {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}
	
	.listItem__textview_content {
		display: flex;
		flex-direction: row;
	}
	
	.listItem__textview_label {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		margin-right: 5px;
		line-height: 12px;
	}
	
	
</style>
